<template>
    <el-row class="min-h-screen bg-gray-700 items-center justify-center">
        <el-col class="flex items-center justify-center flex-col">
            <el-card class="bg-gray-500 p-4 shadow-lg rounded-lg" style="width: 380px;">
                <el-col class="flex items-center justify-center flex-col">
                    <div class="font-bold text-2xl text-light-700 mb-2">管理员注册</div>
                    <el-form 
                        ref="formRef"
                        :rules="rules"
                        :model="form" 
                        class="w-full"
                    >
                        <el-form-item prop="administrator_name" class="justify-center">
                            <el-input v-model="form.administrator_name" placeholder="请输入管理员昵称">
                                <template #prefix>
                                    <el-icon><User /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="administrator_account" class="justify-center mt-8">
                            <el-input v-model="form.administrator_account" placeholder="请输入管理员账号">
                                <template #prefix>
                                    <el-icon><User /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="administrator_password" class="justify-center mt-8">
                            <el-input 
                                type="password" 
                                v-model="form.administrator_password" 
                                placeholder="请输入密码" 
                                show-password
                            >
                                <template #prefix>
                                    <el-icon><Lock /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item class="flex justify-between">
                            <el-button round class="bg-teal-600 w-[90px] text-light-700 ml-10 mr-8" @click="handleRegister">注册</el-button>
                            <el-button round class="bg-teal-600 w-[90px] text-light-700" @click="navigateToLogin">返回登录</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup>  
import { reactive, ref } from 'vue';  
import { User, Lock } from '@element-plus/icons-vue'; 
import { useRouter } from 'vue-router'; 
import { ElMessage } from 'element-plus'
import { register } from '@/api/manager'

const router = useRouter(); 

const formRef = ref(null)

const loading = ref(false) 

const form = reactive({
    administrator_name: '',
    administrator_account: '',
    administrator_password: ''
});

const rules = {
    administrator_name: [{
        required: true,
        message: '管理员昵称不能为空',
        trigger: 'blur'
    }],
    administrator_account: [{
        required: true,
        message: '管理员账号不能为空',
        trigger: 'blur'
    }],
    administrator_password: [{
        required: true,
        message: '密码不能为空',
        trigger: 'blur'
    }, {
        min: 6,
        message: '密码长度不能少于6位',
        trigger: 'blur'
    }]
}

const handleRegister = async () => {
    try {
        loading.value = true;
        await formRef.value.validate();
        
        const formData = new FormData();
        formData.append('administrator_name', form.administrator_name);
        formData.append('administrator_account', form.administrator_account);
        formData.append('administrator_password', form.administrator_password);
        
        const res = await register(formData);
        
        // 检查返回的状态码
        if (res.data.code === '2000') {  
            ElMessage.success('注册成功');
        } else {
            // 显示具体的错误信息
            ElMessage.error(res.data.data || res.data.message);
        }
    } catch (error) {
        console.error('Error in handleRegister:', error);
        ElMessage.error(error.response?.data?.message || '注册失败');
    } finally {
        loading.value = false;
    }
};

const navigateToLogin = () => {
    router.push('/login')
}
</script>

<style>  
.container {  
    min-height: 100vh;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    background-color: #4b5563;
}  
</style>
